<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Graph demo</title>

    <style type="text/css">
        body {font: 10pt arial;}
    </style>

    <script type="text/javascript" src="../graph.js"></script>
    <!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
    <link rel="stylesheet" type="text/css" href="../graph.css">

    <script type="text/javascript">
        var graph;

        function drawVisualization() {
            // create data
            var dataset = [];
            var d = new Date(2012, 9, 23, 20, 0, 0);
            var dateMin = new Date(d);
            for (var i = 0; i < 100; i++) {
                dataset.push({
                    'date': new Date(d),
                    'value': Math.sin(i / 7) * 2 + Math.cos(i/2) + 2
                });
                d.setMinutes(d.getMinutes() + 1);
            }
            d.setMinutes(d.getMinutes() - 1);
            var dateMax = new Date(d);
            var data = [
                {
                    "label": "Data",
                    "data": dataset
                }
            ];

            // specify options
            var options = {
                "width":  "100%",
                "height": "350px",
                "min": dateMin,
                "max": dateMax,
                "zoomMin": 1000 * 60 * 10  // minimum range of 10 minutes
            };

            // Instantiate our graph object.
            graph = new links.Graph(document.getElementById('mygraph'));

            // Draw our graph with the created data and options
            graph.draw(data, options);
        }
    </script>
</head>

<body onload="drawVisualization();">
<p>
    The visible range is limited in this demo:
</p>
<ul>
    <li>minimum visible date is limited to the start of the data using option <code>min</code></li>
    <li>maximum visible date is limited to the end of the data using option <code>max</code></li>
    <li>visible interval is limited to a minimum of 10 minutes using option <code>zoomMin</code></li>
</ul>
<p>
    Other options:
</p>
<ul>
    <li>visible interval can be limited to a maximum using option <code>intervalMax</code></li>
    <li>vertical range can be limited using the options <code>vMin</code> and <code>vMax</code></li>
</ul>

<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>
